<template>
  <el-container>
    <el-header style="height: auto;">

      <div>
        <el-button type="primary" icon="el-icon-search" >搜索</el-button>
        <el-button type="danger"  >重置</el-button>
        
      </div>

      <div>
        <br />
        <el-form :inline="true" class="demo-form-inline" style="float:left;">

          <el-form-item label="商品名称:">
            <el-input placeholder="商品名称" v-model="input1"></el-input>
          </el-form-item>

          <el-form-item label="商品货号:">
            <el-input placeholder="商品货号" v-model="input2"></el-input>
          </el-form-item>

        </el-form>

        <el-form :inline="true" class="demo-form-inline" style="float: left;">

          <el-form-item label="商品分类:">
            <el-select  placeholder="请选择商品分类:" v-model="input3">
              <el-option label="4G手机" value="shanghai"></el-option>
              <el-option label="5G手机" value="beijing"></el-option>
              <el-option label="专用手机" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品品牌:">
            <el-select  placeholder="请选择品牌:" v-model="input4">
              <el-option label="小米" value="shanghai"></el-option>
              <el-option label="华为" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline" style="float: left;">
          <el-form-item label="上架状态:">
            <el-select  placeholder="全部:" v-model="input5">
              <el-option label="小米" value="shanghai"></el-option>
              <el-option label="华为" value="beijing"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="上架状态:">
            <el-select  placeholder="全部:" v-model="input6">
              <el-option label="小米" value="shanghai"></el-option>
              <el-option label="华为" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-header>

    <el-main style="height: auto;">Main
     <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%;"
        class="demo-image"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="编号"
          width="30">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          label="商品图片"
          width="120"
          align="center">
          <template slot-scope="scope"><img style="height: 80px":src="scope.row.pic" /> </template>
        </el-table-column>

        <el-table-column
          prop="name"
          label="商品名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="标签"
          show-overflow-tooltip>
          上架：
         <!-- <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch> -->
        </el-table-column>
        <el-table-column
          prop="price"
          label="排序"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="price"
          label="库存"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="price"
          label="销量"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="price"
          label="审核状态"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="price"
          label="操作"
          show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
       <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>

      <el-pagination
        small
        layout="prev, pager, next"
        :total="50">
      </el-pagination>
      </div>
    </el-main>

  </el-container>

</template>

<script>

  export default {
      data() {
        return {
          input1:'',
          input2:'',
          input3:'',
          input4:'',
          input5:'',
          input6:'',




          tableData: [{
            date: 1,
            pic:require('@/assets/1.png'),
            name: '华为 HUAWEI P20',
            price: '价格：￥3788',
            value:true
          }, {
            date: '2',
            pic:require('@/assets/2.png'),
            name: '小米8 全面屏游戏智能手机 6GB+64GB黑色',
            price: '价格：￥2699'
          }, {
            date: '3',
            pic:require('@/assets/3.png'),
            name: '小米 红米5A全网通版 3GB+32GB红色',
            price: '价格：￥649'
          }, {
            date: '4',
            pic:require('@/assets/4.png'),
            name: '小米MAX3 6GB+128GB',
            price: '价格：￥1899'
          }

          ],
          multipleSelection: []
        }
      },

      methods: {
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        }
      }
    }

</script>

<style>
</style>
